<template>
	<view>
		<u-dropdown ref="dropdown" class="self_drop">
			<u-dropdown-item v-model="params.jobid" :title="jobText" :options="options_job"
				@change="doSearch('options_job',$event)">
				<scroll-view @touchmove.stop.prevent="() => {}" scroll-y="true" style="height: 600rpx;">
					<view class="job-dropdown-box">
						<view class="job-dropdown-item" v-for="(item,index) in options_job"
							@click="handleJobDropdownClick(item)">
							<view :class="params.jobid == item.value ? 'ac-text text' : 'text'">
								{{item.label}}
							</view>
							<view v-show="params.jobid == item.value" class="icon">
								<u-icon name="checkbox-mark" size="32"></u-icon>
							</view>
						</view>
					</view>
				</scroll-view>
			</u-dropdown-item>
			<u-dropdown-item v-model="params.settr" :title="settrText" :options="options_settr"
				@change="doSearch('options_settr',$event)" />
		</u-dropdown>
		<view class="form_split_10"></view>
		<u-empty text="没有找到对应的数据" v-if="show_empty === true" />
		<view>
			<view class="box_1">
				<scroll-view scroll-y="true" style="height: calc(100vh - 184rpx);" @scrolltolower="scrolltolower">
					<view v-for="(item, index) in dataset" :key="index" @click="handleClick(item)">
						<view class="box_item">
							<view class="tx1">
								<view class="name">{{ item.fullname }}</view>
								<view class="right_txt">{{ item.addtime | timeFilter }}</view>
							</view>
							<view class="tx2">
								{{ item.age }}岁 · {{ item.sex_text }} ·
								{{ item.education_text }} ·
								{{ item.experience_text }}
								<view class="right_txt" v-if="item.is_look == 1">已查看</view>
								<view class="right_txt not_download" v-else>未查看</view>
							</view>
							<view class="tx3" @click.stop="handlerDetail(item)">
								<view class="name">职位名称：{{ item.jobname }}</view>
								<view class="time_txt">
									面试时间：{{ item.interview_time | interviewTimeFilter }}
								</view>
							</view>
						</view>
						<view class="form_split_10"></view>
					</view>
					<u-loadmore v-if="dataset.length >= params.pagesize" class="u-loadmore" :status="finished_status" />
				</scroll-view>

			</view>

		</view>
		<u-modal v-model="showDetail" title="面试邀请详情">
			<view class="interview_details_pop_box">
				<view class="detail_line">
					<view class="line_left">面试职位：</view>
					<view class="line_right">
						<text class="a_black">{{ detailInfo.jobname }}</text>
					</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line">
					<view class="line_left">公司名称：</view>
					<view class="line_right">
						<text class="a_black">{{ detailInfo.companyname }}</text>
					</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line">
					<view class="line_left">面试时间：</view>
					<view class="line_right">
						{{ detailInfo.interview_time | interviewTimeFilter }}
					</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line">
					<view class="line_left">联系信息：</view>
					<view class="line_right">
						<text class="a_blue">{{ detailInfo.tel }}</text>
						({{ detailInfo.contact }})
					</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line">
					<view class="line_left">面试地址：</view>
					<view class="line_right">
						{{ detailInfo.address }}
					</view>
					<view class="clear"></view>
				</view>
				<view class="detail_line">
					<view class="line_left">备注信息：</view>
					<view class="line_right">
						{{ detailInfo.note == "" ? "无" : detailInfo.note }}
					</view>
					<view class="clear"></view>
				</view>
				<view class="detail_desc">
					温馨提示：招聘企业无权收取任何费用,面试求职中请加强自我保护,避免上当受骗！
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		formatTime,
		parseTime
	} from '@/utils/index'
	import http from '@/utils/http'
	import api from '@/api'
	import ScrollNav from '@/components/ScrollNav'
	export default {
		name: 'ResumeInterviewInvitation',
		components: {
			ScrollNav
		},
		filters: {
			timeFilter(timestamp) {
				return formatTime(timestamp, '{y}-{m}-{d}', true)
			},
			interviewTimeFilter(timestamp) {
				return parseTime(timestamp, '{y}-{m}-{d} {h}:{i}')
			}
		},
		data() {
			return {
				jobText: '全部职位', // 下拉框当前下拉文字
				settrText: '不限发送时间', // 下拉框当前下拉文字
				finished_status: 'loadmore',
				dataset: [],
				show_empty: false,
				params: {
					jobid: 0,
					settr: '',
					page: 1,
					pagesize: 15
				},
				options_job: [],
				options_settr: [{
						label: '不限发送时间',
						value: ''
					},
					{
						label: '3天内',
						value: 3
					},
					{
						label: '7天内',
						value: 7
					},
					{
						label: '15天内',
						value: 15
					},
					{
						label: '30天内',
						value: 30
					}
				],
				showDetail: false,
				detailInfo: {}
			}
		},
		created() {
			this.fetchData(true)
		},
		methods: {
			handleClick(item) {
				uni.navigateTo({
					url: '/commonViews/ResumeShow?id=' + item.resume_id
				})
			},
			scrolltolower() {
				this.finished_status = 'loading';
				this.params.page++
				this.fetchData(false)
			},
			handleJobDropdownClick(item) {
				this.$refs.dropdown.close();
				this.params.jobid = item.value
				this.jobText = item.label
				this.params.page = 1
				this.fetchData(true)
			},
			fetchData(init) {
				this.show_empty = false
				if (init === true) {
					this.params.page = 1
				} else {
					this.finished_status = 'loading'
				}
				http
					.get(api.company_interview_list, this.params)
					.then(res => {
						if (init === true) {
							let op_job = [...res.data.data.option_jobs]
							this.options_job = []
							this.options_job.push({
								label: '全部职位',
								value: 0
							})
							op_job.forEach(element => {
								this.options_job.push({
									label: element.jobname,
									value: element.id
								})
							})
							this.dataset = [...res.data.data.items]
						} else {
							this.dataset = this.dataset.concat(res.data.data.items)
						}
						// 数据全部加载完成
						if (res.data.data.items.length < this.params.pagesize) {
							this.finished_status = 'nomore'
							if (init === false) {
								this.finished_status = 'nomore'
							} else if (res.data.data.items.length === 0) {
								this.show_empty = true
							}
						}
					})
					.catch(() => {})
			},
			doSearch(type, val) {
				switch (type) {
					case 'options_job':
						let jobText = this.options_job.filter(res => {
							return parseInt(res.value) == parseInt(val)
						})
						this.jobText = jobText.length > 0 ? jobText[0].label : '全部职位'
						break;
					case 'options_settr':
						let settrText = this.options_settr.filter(res => {
							return parseInt(res.value) == parseInt(val)
						})
						this.settrText = settrText.length > 0 ? settrText[0].label : '不限发送时间'
						break;
					default:
						break;
				}
				this.params.page = 1
				this.fetchData(true)
			},
			handlerDetail(item) {
				this.detailInfo = item
				this.showDetail = true
			},
		}
	}
</script>

<style lang="scss" scoped>
	.job-dropdown-box {
		background: #fff;

		.job-dropdown-item {
			padding: 26rpx 32rpx;
			line-height: 44rpx;
			position: relative;
			display: flex;

			&::after {
				content: " ";
				position: absolute;
				left: 0;
				top: 0;
				pointer-events: none;
				box-sizing: border-box;
				transform-origin: 0 0;
				width: 199.8%;
				height: 199.7%;
				transform: scale(.5);
				border: 0 solid #e4e7ed;
				z-index: 2;
				border-bottom-width: 2rpx;
			}
		}

		.text {
			width: auto;

			&.ac-text {
				color: rgb(41, 121, 255);
			}
		}

		.icon {
			flex: 1;
			overflow: hidden;
			text-align: right;
			vertical-align: middle;
			color: #909399;
			font-size: 20rpx;
			color: rgb(41, 121, 255);
		}
	}

	.interview_details_pop_box {
		max-height: 600rpx;
		background: #ffffff;
		overflow-x: hidden;
		overflow-y: auto;
		font-size: 26rpx;
		padding: 40rpx;

		.detail_desc {
			width: 100%;
			background-color: #f5f5f5;
			line-height: 1.5;
			color: #666666;
			padding: 16rpx 40rpx;
			margin-top: 20rpx;
		}

		.detail_line {
			line-height: 1.5;
			margin-bottom: 10rpx;

			.line_left {
				float: left;
				color: #999999;
				text-align: right;
				width: 140rpx;
				line-height: 1.5;
			}

			.line_right {
				float: left;
				color: #333333;
				word-break: break-all;
				width: 360rpx;
				text-align: left;
				line-height: 1.5;

				.a_black {
					color: #333333;
					text-decoration: none;
				}

				.a_blue {
					color: #1887fb;
					text-decoration: none;
				}
			}
		}
	}

	.self_drop {
		&::after {
			border: none;
		}
	}

	.box_1 {
		width: 100%;

		.box_item {
			width: 100%;
			background-color: #ffffff;
			padding: 0 32rpx 40rpx 32rpx;

			.tx3 {
				width: 100%;
				border-radius: 16rpx;
				box-shadow: 0 0 10rpx #c2c2c2;
				position: relative;
				padding: 28rpx 0 24rpx;

				&::after {
					position: absolute;
					right: 34rpx;
					top: 62rpx;
					width: 14rpx;
					height: 14rpx;
					border-top: 2rpx solid #999999;
					border-right: 2rpx solid #999999;
					transform: rotate(45deg);
					content: "";
				}

				.name {
					font-size: 28rpx;
					color: #333333;
					font-weight: bold;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					max-width: 580rpx;
					padding: 0 0 0 82rpx;
					background-image: url($ImgUrl + "interview_name_ico.png");
					background-repeat: no-repeat;
					background-position: 36rpx 4rpx;
					background-size: 34rpx 32rpx;
					margin-bottom: 16rpx;
				}

				.time_txt {
					font-size: 24rpx;
					color: #999999;
					padding: 0 0 0 82rpx;

					.time {
						color: #1787fb;
					}
				}
			}

			.tx2 {
				font-size: 28rpx;
				color: #666666;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				position: relative;
				padding-right: 120rpx;
				margin-bottom: 34rpx;

				.right_txt {
					position: absolute;
					right: 0;
					top: -2rpx;
					font-size: 24rpx;
					padding: 6rpx 16rpx;
					background-color: #fafafa;
					border-radius: 6rpx;
					color: #999999;

					&.not_download {
						color: #ff5d24;
						background-color: #fffbf8;
					}
				}
			}

			.tx1 {
				margin-bottom: 18rpx;
				position: relative;
				padding: 38rpx 0 0;

				.name {
					font-size: 32rpx;
					color: #333333;
					font-weight: bold;
					max-width: 480rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.right_txt {
					position: absolute;
					right: 0;
					top: 44rpx;
					font-size: 24rpx;
					color: #999999;
				}
			}
		}
	}
</style>
